<style scoped lang="scss">
.mop {

     margin-left: 20px;
     .top {
          width: 100%;

          li {

               margin-top: 10px;

               img {
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
               }

               div {
                    margin-top: 10px;
               }

          }
     }

     .firstef {
          width: 100%;
          height: 50px;
          background-color: white;
                         position: fixed;
               bottom: 0px;
               z-index: 999;
          input {
               width: 300px;
               height: 30px;
               margin-bottom: 10px;
               border: 1px solid #ccc;

          };


          button {
               margin-left: 10px;
               border: none;
               background-color: whitesmoke;


          }
     }
}

.mushf {
     .post {

          .ksjo {
               position: absolute;
               right: 4px;
               line-height: 36px;

               img {
                    width: 25px;
                    height: 25px;
               }
          }
     }
}
</style>

<template> <!-- vue实例外创建 -->
     <div class="mop">
          <div v-for="(item, index) in list" :key="index" class="top">
             <div> {{ item.time }}</div>
             <div> {{ item.pub }}</div>
                <div> {{ item.city }}</div>
             <div> {{ item.content }}</div>
          
            <button @click="click()">></button>
              
             <li v-if="show">
                <div class="post">    <img :src="userInfo.avatar" alt="">
                         <span> {{ userInfo.nickname }}</span>评论:{{ item.evaluate1 }}</div>
                <div class="post">    <img :src="userInfo.avatar" alt="">
                         <span> {{ userInfo.nickname }}</span>评论：{{ item.evaluate2 }}</div>
                <div class="post">    <img :src="userInfo.avatar" alt="">
                         <span> {{ userInfo.nickname }}</span>评论：{{ item.evaluate3 }}</div>
                <div class="post">    <img :src="userInfo.avatar" alt="">
                         <span> {{ userInfo.nickname }}</span>评论：{{ item.evaluate4 }}</div>
                </li>
              <p v-else>  </p>
               <li class="mushf">
                    <div class="post">

                         <img :src="userInfo.avatar" alt="">
                         <span> {{ userInfo.nickname }}</span>
                         <!-- <span class="ksjo">
                              <img src="../../assets/评论-1.png" alt="" >
                         </span> -->

                    </div>

                    <div>
                         {{ item .star}}
                    </div>

               </li>

               <li  @click="husf"> 
     
                    <div v-for="(item, index) in comment" :key="index" class="top">
                          <div> {{ item.time }}</div>
             <div> {{ item.pub }}</div>
                <div> {{ item.city }}</div>
             <div> {{ item.content }}</div>
              
                    </div>

               </li>

          </div>

          <div class="firstef">
               <input type="text" v-model="huyxt">
               <button @click="mushut">发送评论</button> 
          </div>
     </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import localStorePlugin from '@/stores/plugins/index'

import { ref } from 'vue';


import { useRoute } from 'vue-router';

const router = useRoute();

const historylist = ref(JSON.parse(localStorage.getItem('historylist')) || [])

const huyxt = ref('')
const list=ref<any>([])
const getlist=()=>{
     axios.get('/addres/comment').then(res => {
          console.log(res)
          list.value = res.data.data
          console.log(res)
     }).catch(err => {
          console.log(err)
     })
}
getlist()

const mushut = () => {
     axios.post('/addres/addPing', {
          params: {
               pub: '1',
               city:'2',
               content:'3',
               star: '4',
               evaluate1:'',
               evaluate2:'',
               evaluate3:'',
               evaluate4:'',
               time:''
          }
     }).then(res => {
          console.log(res)
     })
     if (huyxt.value == '') {
          return;
     }
     else {
          console.log(historylist.value)
          historylist.value.unshift(huyxt.value)
          localStorage.setItem('historylist', JSON.stringify(historylist.value))
          huyxt.value = ''
     }
}

const husf = () => {
     router.push('/Comment_submission')
}
 const show = ref(false);
     
 const click = () => {
     show.value = !show.value;         
 };

 

const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')));
const comment = ref(JSON.parse(localStorage.getItem('comment')));

</script>
